import React, { useContext } from "react";
import { createUseStyles } from "react-jss";
import classNames from "classnames";
import { ThemeContext } from "../../theme";
import { Type } from "./enum";
import { SelectedOptionsProps } from "./index";

const useStyles = createUseStyles({
  fontSize: {
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },
});

export default function Label({
  disabled,
  placeholder,
  onRemove,
  type,
  selectedOptions,
}: {
  disabled?: boolean;
  placeholder?: string;
  onRemove?: (e: any, idx: number) => void;
  type?: Type;
  selectedOptions: SelectedOptionsProps[];
}) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });

  if (selectedOptions.length === 0) {
    return <input type="text" placeholder={placeholder} />;
  }
  if (type === Type.MULTI_CHOICE) {
    return (
      <div>
        {selectedOptions.map((o, idx) => {
          const isReadonly = disabled || o.readonly;
          return (
            <span
              className={classNames("label", classes.fontSize, {
                disabled: isReadonly,
              })}
              key={idx}
              role="multiple-value"
            >
              {o.label}
              {!isReadonly && (
                <span
                  role="label-remove"
                  className="label-remove"
                  onClick={(e) => onRemove?.(e, idx)}
                >
                  &times;
                </span>
              )}
            </span>
          );
        })}
      </div>
    );
  }
  const label = selectedOptions[0].label;
  return <span role="value">{label}</span>;
}
